<script setup>
import { avatarColor } from '@/assets/data/index.js'
import ZyImage from '@/components/ZyImage/index.vue'

defineProps({
  width: { type: String, default: '60px' },
  height: { type: String, default: '50px' },
  url: { required: true, type: String },
  previewTeleported: { type: Boolean, default: false },
  radius: { type: String, default: '0px' },
  isPreview: { type: Boolean, default: true } // 是否开启图像预览
})
</script>

<template>
  <zy-image
    v-if="url?.startsWith('http')"
    :width="width"
    :height="height"
    :url="url"
    :is-preview="isPreview"
    :preview-teleported="previewTeleported"
    :style="{ borderRadius: radius }"
  />
  <div
    v-else
    :style="{ backgroundImage: avatarColor[url], borderRadius: radius, width, height }"
  ></div>
</template>

<style lang="scss" scoped></style>
